<template>
  <div class="exchangeDetails">
    <!-- 退款条件：实物下单完成 未发货 -->
    <CDWHeader
      title="兑换详情"
      :rightText="this.tkState == 1 && this.orderType == 2 ? '退款' : ''"
      @click-right="clickRight"
    />
    <!-- 兑换状态 0:失败，1成功 -->
    <ExchangeState :state="this.tradStatus" />
    <!-- 商品简介、兑换积分、兑换时间。 -->
    <ProductIntroduction
      :state="orderDetailData.orderType"
      :orderInfo="orderDetailData"
    />
    <!-- 收货人信息、地址等。1优惠券类型 2实物 3虚拟订单 -->
    <ConsigneeInformation
      v-if="this.orderType == 2"
      :orderDetailData="orderDetailData"
    />
    <!-- {
      订单编号、状态等.
    } -->
    <OrderStatus :orderDetailData="orderDetailData" />

    <div
      class="goods-action"
      v-if="
        orderDetailData.orderStatus == 5 ||
        orderDetailData.afterStatus == 'Apply'
      "
    >
      <div class="goods-btn" @click="cancelClickFn">取消申请</div>
    </div>

    <div class="goods-action" v-if="this.tkState == 1 && orderDetailData.afterStatus == 'return'">
      <div class="goods-btn" @click="resetClickFn">重新申请</div>
    </div>

    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    />
    <van-dialog
      v-model="refund"
      title="填写退款原因"
      show-cancel-button
      :beforeClose="beforeClose"
      confirmButtonText="提交"
    >
      <van-field
        v-model="message"
        rows="2"
        autosize
        label=""
        type="textarea"
        maxlength="200"
        placeholder="请输入退款原因"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>

<script>
import CDWHeader from "@/components/header";
import ExchangeState from "./components/exchangeState";
import ProductIntroduction from "./components/productIntroduction";
import ConsigneeInformation from "./components/consigneeInformation";
import OrderStatus from "./components/orderStatus";
export default {
  name: "exchangeDetails",
  components: {
    CDWHeader,
    ExchangeState,
    ProductIntroduction,
    ConsigneeInformation,
    OrderStatus,
  },
  data() {
    return {
      show: false,
      refund: false,
      message: "",
      actions: [{ name: "申请退款", className: "refund-sty" }],
      tradStatus: "",
      orderId: this.$route.query.orderId,
      mainDivType: "",
      orderDetailData: {},
      tkState: "",
      orderType: "",
    };
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    showClick() {
      this.show = true;
    },
    beforeClose(action, done) {
      if (action == "cancel") {
        done();
        this.message = "";
      } else {
        if (!this.message) {
          this.$toast("请输入退款原因");
          done(false); //不关闭弹框
        } else {
          let formData = {
            applyType: "1", //退款
            message: this.message,
            orderId: this.$route.query.orderId,
          };
          this.$http.post("/api/saleafter/apply", formData).then((res) => {
            if (res.code == "0") {
              this.getOrderDetail();
            }
          });
          done();
          this.message = "";
        }
      }
    },
    onCancel() {
      // this.$toast("取消");
    },
    onSelect() {
      this.refund = true;
    },
    clickRight() {
      this.show = true;
    },
    getOrderDetail() {
      this.$http.get("/api/shop/order/" + this.orderId, {}).then((res) => {
        if (res.code == "0") {
          let data = res.data;
          this.orderType = data.orderType;
          this.tradStatus = data.tradStatus + "";
          this.orderDetailData = data;
          this.tkState = data.orderStatus;
        }
      });
    },

    // 取消申请
    cancelClickFn() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认是否取消申请？",
        })
        .then(() => {
          let formData = {
            orderId: this.$route.query.orderId,
          };
          this.$http
            .post("/api/saleafter/applyCancel", formData)
            .then((res) => {
              if (res.code == "0") {
                this.getOrderDetail();
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },

    // 重新申请
    resetClickFn() {
      this.clickRight();
    },
  },
};
</script>
<style scoped lang="less">
.exchangeDetails {
  padding-bottom: 60px;
  .goods-action {
    position: fixed;
    left: 0;
    bottom: -1px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 4px 18px;
    border-top: 1px solid #ebedf0;
    background: #fff;
    .goods-btn {
      flex: 1;
      height: 48px;
      line-height: 48px;
      font-size: 18px;
      text-align: center;
      color: #fff;
      background: #51afb1;
      border-radius: 8px;
      &.disabled {
        background: #ccc;
      }
    }
  }
  .refund-sty {
    font-size: 16px;
    font-weight: 700;
    color: #ef6653;
  }
}
</style>
